<?php

?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />  
    <title>注册页面</title>
    <style>
*{
    /* 内边距 */
    padding: 0;
     /* 外边距 */
    margin: 0;
    /*  字母间距  */
    letter-spacing: .05em;
  }
  html{
     /*  元素高度  */
    height: 100%;
  }
  body{
    height: 100%;
  }
  .main{
    height: 100%;
    /*  元素背景   linear-gradient-线性渐变 */
    background-image: linear-gradient(to right,#5ee7df,#b490ca);
  }
  .register{
    /*  元素背景颜色  */
    background-color: #fff;
    width: 250px;
    height: 500px;
    padding: 0 50px;
    /*  元素定位为圆角  */
    border-radius: 20px;
    /*  元素定位为相对定位  */
    position: relative;
    left: 50%;
    top:50%;
     /*  定义2D转换  */
    transform: translate(-50%,-50%);
  }
  .register .heard{
    /* size字体的大小 weight宽度 text-align位置 */
    font-size: 28px;
    color: rgb(67, 112, 150);
    font-weight: bold;
    text-align: center;
    /* 行高 */
    line-height: 150px;
  }
  .register .form .input-item{
    /* 此元素将显示为块级元素 */
    display: block;
    width: 100%;
    /* 下外边距 */
    margin-bottom: 20px;
     /* 设置 4 个边框的样式 */
    border: 0;
    padding: 10px;
   /* 设置下边框的样式: 实线 */
    border-bottom: 1px solid rgb(138, 126, 126);
    font-size: 15px;
    /* （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，
    可起到突出元素的作用 */
    outline: none;
  }
  .register .form .input-item ::placeholder{
    text-transform: uppercase;
  }
  .register .form .input-item{
    line-height: 22px;
  }
  .register .form .btn1{
    border-color: rgb(219, 216, 216);
    border-width: 1px;
    border-radius: 5px;
    line-height: 25px;
      flex:1 1 auto;
    margin: 5px;
    padding: 8px;
    text-align: center;
  text-decoration: none;
    width: 100%;
    color: #fff;
    transition: 0.5s;
    background-size: 200% auto;
    cursor: pointer;
    background-image: linear-gradient(to left,#b490ca 0%, #84fab0 51%,#b490ca 100%);
  }
 

  .register .form .btn a{
    text-decoration: none;
    color:black;
  }

  .register .form .btn:hover{
  background-position: right center;    

}
.register .form .btn1:hover{  
  background-image: linear-gradient(to right,#84fab0 0%,#b490ca 51%, #84fab0 100%);

}
.main .register #hint {
  color: red;
}
    </style>
</head>
<body>

<!-- 首先建立一个div放置页面的相关内容 -->
  <div class="main">
    <!-- 建立一个登录的div来放置登录相关的内容 -->
    <div class="register">     

 <form action="register.php" method="POST" id="form">
    <!-- 建立一个div放置登录标题 -->
      <div class="heard">注册</div>
      <!-- 开始填充登录相关的输入框 -->
      <div id="hint"></div>
      <div class="form" >
        <input type="text" name="Username" id="Username" placeholder="用户名" class="input-item"></input>
        <input type="password" name="Password" id="Password" placeholder="密码" class="input-item"></input>
        <input type="mail" name="Mail" id="Mail" placeholder="邮箱" class="input-item"></input>
        <input type="phone" name="Phone" id="Phone" placeholder="电话号码" class="input-item"></input>
        <div class="btn"><input type="submit" class="btn1" name="submit" value="注册"></input></div>

      </div>
      
      <!-- 注册相关内容填写 -->
      </form>
    </div>
    <!-- 提示：这是一个登录的基本页面算是完成，下面是对页面进行渲染 -->
  </div>

</body>

<script>
  window.onload= function(){
     var hint = document.getElementById("hint");
      var username = document.getElementById("Username");
      var password = document.getElementById("Password");
      var mail = document.getElementById("Mail");
      var phone = document.getElementById("Phone");
      var form = document.getElementById("form");

      username.onfocus = function(){
          hint.innerHTML = "";
      }

      password.onfocus = function(){
          hint.innerHTML = "";
      }
      mail.onfocus = function(){
          hint.innerHTML = "";
      }
      phone.onfocus = function(){
          hint.innerHTML = "";
      }
      form.onsubmit = function(){
    if(username.value==""){
              hint.innerHTML = "用户名不能为空!"
              return false;
          }else if(username.value.length>16||username.value.length<2){
              hint.innerHTML = "用户名在2~16个字符之间"
              return false;

          }else if(password.value==""){
              hint.innerHTML = "密码不能为空!"
              return false;
          }else if(password.value.length>16||password.value.length<2){
              hint.innerHTML = '密码在2~16个字符之间';
              return false;
          }else if(mail.value.length>20||mail.value.length<5){
              hint.innerHTML = '邮箱在5~20个字符之间';
              return false;
          }
          else if(phone.value==""){
              hint.innerHTML = '电话号码不能为空';
              return false;
          }
          else{
alert("注册成功！ 确定跳转");
      return true;
    }
    
      }
  }
</script>
</html>